<template>
  <div>
    <!-- 面包屑导航 -->
    <div class="breadNav" style="margin: 20px 0 20px 20px;">
        <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }" class="el-icon-s-home">首页</el-breadcrumb-item>
        <el-breadcrumb-item class="el-icon-position" :to="{ path: '/eva' }"><a href="/">评价管理</a></el-breadcrumb-item>
        <el-breadcrumb-item class="el-icon-position">虚拟评价</el-breadcrumb-item>
        </el-breadcrumb>  
    </div>
    <!-- 虚拟评价 -->

    <!-- 按钮切换 -->
    <el-row style="margin:50px 70px;">
      <el-button size="medium" @click="mesList">评价列表</el-button>
      <el-button size="medium" @click="virList">虚拟评价</el-button>
    </el-row>
    <!-- 商品Form -->
    <div class="chooseForm">
      <el-form  label-width="80px">
        <el-form-item label="选择商品">
          <el-input placeholder="请输入商品名称" v-model="form.store" class="name"></el-input>
          <el-button type="info" @click="choose" style="margin-left:20px;">选择商品</el-button>
        </el-form-item>
        <el-form-item label="评论时间">
          <el-col :span="6">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.ymd" style="width: 95%;"></el-date-picker>
          </el-col>
          <el-col :span="6">
            <el-time-picker placeholder="任意时间点" v-model="form.hms" style="width: 95%;"></el-time-picker>
          </el-col>
        </el-form-item>
        <!-- 上传图片 -->
        <el-form-item label="用户头像">
          <el-upload
              class="avatar-uploader"
              v-model="form.useravatar"
                action="http://127.0.0.1:7001/api/Xloadimg"
                :on-success="handleAvatarSuccess"
                >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>

        <el-form-item label="用户昵称">
          <el-input placeholder="请输入用户名称" v-model="form.evalbuyer" class="name"></el-input>
        </el-form-item>
        <el-form-item label="评价等级" >
          <div class="block" style="margin-top:10px;">
            <el-rate
              v-model="form.level"
              :colors="colors">
            </el-rate>
          </div>
        </el-form-item>
        <el-form-item label="首次评价:">
            <el-input v-model="form.firstEval" placeholder="请输入评价内容" class="name"></el-input>
            <el-button type="danger" style="margin-left:20px;background: lightpink;blistCode:none">请输入评价内容</el-button>
            <!-- 首次评价图片 -->
            <el-upload
              class="avatar-uploader"
                action="http://127.0.0.1:7001/api/Xloadimg"
                :on-success="homeImg"
                >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="回复:">
            <el-input v-model="form.response" placeholder="请输入回复内容" class="name"></el-input>
            <el-button type="danger" style="margin-left:20px;background: lightpink;blistCode:none">请输入回复内容</el-button>
            <!-- 回复图片 -->
            <el-upload
              class="avatar-uploader"
                action="http://127.0.0.1:7001/api/Xloadimg"
                :on-success="reverImg"
                >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="追加评价:">
            <el-input v-model="form.addResponse" placeholder="请输入评价内容" class="name"></el-input>
            <el-button type="danger" style="margin-left:20px;background: lightpink;blistCode:none">请输入评价内容</el-button>
            <!-- 追加图片 -->
            <el-upload
              class="avatar-uploader"
                action="http://127.0.0.1:7001/api/Xloadimg"
                :on-success="addImg"
                >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确定</el-button>
          <el-button @click="onCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 对话框 -->
    <el-dialog
        title="选择商品"
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="handleClose">
        <div style="margin-bottom:20px">
          <el-input type="text" v-model="form.storename" placeholder="请输入药品名称" style="width:85%"></el-input>
          <el-button  @click="chooseShop" style="width:15%">搜索</el-button>
        </div>
        <!-- <el-input v-model="form.input" style="width:400px"></el-input>
        <el-button type="info" @click="choose">搜索</el-button> -->
        <el-table
        :data="tableData"
        style="width: 90%;margin:auto">
        <el-table-column
          prop="date"
          label="商品"
          width="200"
          v-slot="{row}">
          <el-image :src="storeImg"></el-image>
          <span>{{row.store}}</span>
        </el-table-column>
        <el-table-column label="操作">
        <template  v-slot="{row}">
          <el-button
            size="mini"
            v-if="row.choice == 1"
            @click="handleEdit(row)"
            class="rcan"
            >选择</el-button>

            <el-button
            size="mini"
             v-else
            @click="handleEdit(row)"
            >取消</el-button>
        </template>
      </el-table-column>
      </el-table>
      <el-button type="primary" style="margin:20px 30px" @click="save">保存</el-button>
      <el-button @click="cancel">取消</el-button>
    </el-dialog>
  </div>
</template>

<script>
import { getVirtualList, getXaddEvalList, getXvirtualevalstate } from '../../../api'

export default {
  data() {
    return {
      form:{
        store:'',//商品名称
      storeImg:"",//商品图片
      addResponse: "",//追加评价
      addResponseImg:"",//追加评价图片
      firstEval: "",//首次评价
      firstEvalImg:"",//首次评价图片
      level: 0,//评价等级
      response: "",//回复评价
      responseImg:"saeafewfe",//回复评价图片
      useravatar: "",//用户头像
      evalbuyer: "",//用户名称评价者
      item:"",//评价时间
      ymd:"",//年月日
      hms:"",//时分秒
      responsestate:"",//回复状态
      audit:"未审核",//审核状态
      listCode:'',//订单单号
       time:"",
      },
      // 模态框选择
      reverseCan:true,
      rtext:'选择',

      // 评分
      value2: null,
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      dialogVisible: false,
      tableData: [],
      // 药品名称搜索
      storename:''
    }
  },
  methods: {
    // 按钮切换
    mesList() {
      this.$router.push('/eva')
    },
    virList() {
      this.$router.push('/virtual')
    },
    //确定按钮
    onSubmit() {
      if(this.form.response!="" || this.form.responseImg!=""){
        this.form.responsestate="已回复"
      }else{
        this.form.responsestate="未回复"
      }
      this.form.time=new Date()
      let currDate = new Date();
      //订单单号
      let year = currDate.getFullYear();
      let month = currDate.getMonth() + 1 < 10 ? "0" + (currDate.getMonth() + 1): currDate.getMonth() + 1;
      let day = currDate.getDate()<10 ? "0"+currDate.getDate() : currDate.getDate();
      //获取年月日
      let date = year + month + day;
      //获取当时时间戳
      let timestamp = Date.parse(currDate);
      //生成订单
       this.form.listCode= date + timestamp; 
      // const obj={
      //   store:this.store,//商品名称
      //   storeImg:this.storeImg,//商品图片
      //   addResponse: this.addResponse,//追加评价
      //   addResponseImg:this.addResponseImg,//追加评价图片
      //   firstEval: this.firstEval,//首次评价
      //   firstEvalImg:this.firstEvalImg,//首次评价图片
      //   level: this.level,//评价等级
      //   response: this.response,//回复评价
      //   responseImg:this.responseImg,//回复评价图片
      //   useravatar: this.useravatar,//用户头像
      //   evalbuyer: this.evalbuyer,//用户名称评价者
      //   time:this.time,//评价时间
      //   responsestate:this.responsestate,//回复状态
      //   audit:this.audit,//审核状态
      //   listCode:this.listCode,//订单单号
      // }
      console.log(this.form)
      getXaddEvalList(this.form).then(res=>{
        console.log(res);
        getVirtualList()
      })
        this.$router.push('/eva')
    },
    //取消按钮
    onCancel() {
      this.$router.push('/eva')
    },

    // 选择商品
    choose() {
      this.dialogVisible = true
    },
    //搜索
    chooseShop(){

    },

    // 图片上传
    handleAvatarSuccess(res) {
        this.storeImg = `http://127.0.0.1:7001${res.data}`
        // console.log(this.storeImg)
      },
      //首页图片
      homeImg(res){
        this.firstEvalImg=`http://127.0.0.1:7001${res.data}`
      },
      //回复图片
      reverImg(res){
        this.responseImg=`http://127.0.0.1:7001${res.data}`
      },
      //追加图片
      addImg(res){
        this.addResponseImg=`http://127.0.0.1:7001${res.data}`
      },

    // 模态框选择
    handleEdit(row) {
      row.choice=!row.choice
    },
    //保存
    save() {
      this.dialogVisible = false
    },
    //取消
    cancel() {
      this.dialogVisible = false
    },
    // 关闭对话框
    handleClose(done) {
        done()
      }
  },
  created(){
    // getXvirtualevalstate().then(res=>{
    //   this.tableData=res.data.map((item)=>{
    //        if(item.choice==1){
    //          item.choice=true
    //        }else{
    //          item.choice=false
    //        }
    //        return item
    //   })
    //   // console.log(this.tableData);
    // })
  }
}
</script>

<style lang="scss" scoped>
.chooseForm {
  width:1000px;
  margin:0 auto;
  
}
.rcan {
    background: red;
    color:white;
  }
.name {
  width:450px;
}
</style>